<template>
  <div class="mi-editor-box">
    <quill-editor
        ref="myQuillEditor"
        v-model="content"
        :options="editorOption"
        class="ql-editor"
        @blur="onEditorBlur($event)"
        @change="onEditorChange($event)"
        @focus="onEditorFocus($event)">
      >
    </quill-editor>
  </div>
</template>

<script>

import {quillEditor} from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{header: 1}, {header: 2}], // 1、2 级标题
  [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
  [{script: "sub"}, {script: "super"}], // 上标/下标
  [{indent: "-1"}, {indent: "+1"}], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{size: ["small", false, "large", "huge"]}], // 字体大小
  [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
  [{color: []}, {background: []}], // 字体颜色、字体背景颜色
  [{font: []}], // 字体种类
  [{align: []}], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video"] // 链接、图片、视频
];
// 图片改变
export default {
  name: "MiEditor",
  components: {
    quillEditor
  },
  data() {
    return {
      content: `<p>这是 vue-quill-editor 的内容！</p>`, //双向数据绑定数据
      // 富文本编辑器配置
      editorOption: {
        theme: "snow", //模式：bubble 简易模式 / snow
        placeholder: "您想说点什么？",
        modules: {
          toolbar: {
            container: toolbarOptions,
            // container: "#toolbar",
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            }
          }
        }
      }
    }
  },
  methods: {
// / 失去焦点事件
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
// 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
// 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
// 内容改变事件
    onEditorChange({quill, html, text}) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  }
}
</script>

<style lang="less" scoped>
.mi-editor-box {

}
</style>